<style type="text/css">


img {border: none;}

.container {
	overflow: hidden;
	width: 1000px;
	margin: 0 auto;
}
#main {
	padding: 10px;
	background: #f0f0f0;
	border: 1px solid #ccc;
}
a {color: #00008B;}

/*--Main Image Preview--*/
.main_image {
	width: 700px; height: 456px;
	float: left;
	background: #333;
	position: relative;
	
overflow: hidden;
color: #fff;
    align: center;
}
.main_image h2 {
	font-size: 2em;
	font-weight: normal;
	margin: 0 0 5px;
	padding: 10px;
	align: center;
}
.main_image p {
	font-size: 1.2em;
	padding: 10px;	margin: 0;
	line-height: 1.6em;
}
.main_image .desc{
	position: absolute;
	bottom: 0;	left: 0;
	width: 100%;
	display: none;
}
.main_image .block{
	width: 100%;
	background: #111;
	border-top: 1px solid #000;
}
.main_image a.collapse {
	background: url("http://www.sohtanaka.com/web-design/examples/image-rotator/btn_collapse.gif") no-repeat scroll left top transparent;
	height: 27px; width: 93px;
	text-indent: -99999px;
	position: absolute; 
	top: -27px; right: 20px; 
}
.main_image a.show {background-position: left bottom;} 


.image_thumb {
	float: left;
	width: 250px;
	background: #f0f0f0;
	border-right: 1px solid #fff;
	border-top: 1px solid #ccc;

}
.image_thumb img {
	border: 1px solid #ccc; 
	padding: 5px; 
	background: #fff; 
	float: left;
}
.image_thumb ul {
       list-style-type: none;
	margin: 0; padding: 0;
	list-style: none;
	z-index:1;
}
.image_thumb ul li{
  list-style-type: none;
	margin: 0; padding: 12px 10px;
	background: repeat-x scroll 0 0 #000000;
	width: 250px;
	float: left;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #fff;
	border-right: 1px solid #ccc;
	


}
.image_thumb ul li.hover {
list-style-type: none;
	background: #A9A9A9;
	cursor: pointer;
}
.image_thumb ul li {
    list-style-type: none;
	background: #ddd;
	cursor: default;
}
html .image_thumb ul li h2 {
	font-size: 0.1 em; 
	margin: 3px 3; padding: 5;
 	margin-right: 0px; 
	margin-left: 120px;
}
.image_thumb ul li .block {
	float: left; 
	margin-left: 10px;
	padding: 0;
	width: 170px;
}	
.image_thumb ul li p{z-index:5;}

.image_thumb ul li span{ display: none; }



</style>
<!--Call jQuery-->
<script type="text/javascript">
jQuery(document).ready(function() {
	//Show Banner
	jQuery(".main_image .desc").show(); //Show Banner
	jQuery(".main_image .block").animate({ opacity: 0.85 }, 1 ); //Set Opacity

	//Click and Hover events for thumbnail list
	jQuery(".image_thumb ul li:first").addClass('active'); 
	jQuery(".image_thumb ul li").click(function(){ 
		//Set Variables
		var imgAlt = jQuery(this).find('img').attr("alt"); //Get Alt Tag of Image
		var imgTitle = jQuery(this).find('a').attr("href"); //Get Main Image URL
		var imgDesc = jQuery(this).find('.block').html(); 	//Get HTML of block
		var imgDescHeight = jQuery(".main_image").find('.block').height();	//Calculate height of block	
		
		if (jQuery(this).is(".active")) {  //If it's already active, then...
			return false; // Don't click through
		} else {
			//Animate the Teaser				
			jQuery(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
				jQuery(".main_image .block").html(imgDesc).animate({ opacity: 0.85,	marginBottom: "0" }, 250 );
				jQuery(".main_image img").attr({ src: imgTitle , alt: imgAlt});
			});
		}
		
		jQuery(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists
		jQuery(this).addClass('active');  //add class of 'active' on this list only
		return false;
		
	}) .hover(function(){
		jQuery(this).addClass('hover');
		}, function() {
		jQuery(this).removeClass('hover');
	});
			
	//Toggle Teaser
	jQuery("a.collapse").click(function(){
		jQuery(".main_image .block").slideToggle();
		jQuery("a.collapse").toggleClass("show");
	});
});//Close Function
</script>




 
<div id="main" class="container" >       			   

#set ($main_img = $central_image.get('image')) 
#if ( "$main_img" != "" )								
	
     <div class="main_image">							
		<img src="$main_img.getData()">					
			<div style="display: block;" class="desc">	

			<a href="#" class="collapse">Close Me!</a>
			<div style="opacity: 0.85;" class="block">

#set ($main_descr = $central_image.get('descr'))
#set ($txt1 = $central_image.get('txt'))
#set ($link1 = $central_image.get('link'))


#if ( "$main_descr" != "" )	
		<p>$main_descr.getData()</p>
                
		#end
			</div>
		</div>
	</div>
				
#end
	

<div style="width: 290px; height: 456px; overflow: auto; padding: 5px">	
	
<div class="image_thumb">												
	
	      	<ul>
		
		      <li href="http://www.visual-paradigm.com/product/vpsuite/">
				
               #set ($main_img_thumb = $central_image.get('image_thumb'))
               #if ( "$main_img_thumb" != "" )	
				<a href="$main_img.getData()">
				<img src="$main_img_thumb.getData()"/></a>
				<h2>$central_image.getData()</h2>
                        <p></p>   
                  <p>$txt1.getData()</p>
                  <p>$link1.getData()</p>

	<div class="block">                             					
    	#set ($main_descr = $central_image.get('descr'))
        #if ( "$main_descr" != "" )	
		<span> $main_descr.getData()</span>
		#end
        </div>
			</li>
			
#end

#foreach ($each_section in $rep_image.getSiblings())
#set ($img = $each_section.get('image'))
#set ($img_thumb = $each_section.get('image_thumb')) 
#set ($descr = $each_section.get('descr'))
#set ($txt1 = $each_section.get('txt'))
#set ($link1 = $each_section.get('link'))

#if ( "$img" != "" )	
			<li>
				<a href="$img.getData()">
				<img src="$img_thumb.getData()"/></a>
				
<h2>$each_section.getData()</h2>
<p></p>
<p>$txt1.getData()</p>
<p>$link1.getData()</p>
 <div class="block">								
				       
                #if ( "$descr" != "" )	
                   <span> $descr.getData() </span>
                #end	
		
				</div>

		
			</li>           
				
#end
#end
		</ul>
	</div> 											
</div>      										
    </div>